import React from 'react';
import {
  StyleSheet,
  View,
  ListView,
  Image,
  Text,
  TouchableHighlight
} from 'react-native';
import { StackNavigator } from 'react-navigation';

class PeopleScreen extends React.Component {
  constructor(props) {
    super(props);
    const ds = new ListView.DataSource({
      rowHasChanged: (r1, r2) => r1 !== r2
    });
    this.state = {
      dataSource: ds.cloneWithRows([
        'John',
        'Joel',
        'James',
        'Jimmy',
        'Jackson',
        'Jillian',
        'Julie',
        'Devin'
      ])
    };
    this._handlePress = this._handlePress.bind(this);
    this._renderRow = this._renderRow.bind(this);
  }

  static navigationOptions = {
    title: 'People'
  };

  render() {
    return (
      <View style={styles.wrapper}>
        <ListView
          dataSource={this.state.dataSource}
          renderRow={this._renderRow}
        />
      </View>
    );
  }

  _renderRow(rowData) {
    return (
      <TouchableHighlight onPress={this._handlePress}>
        <View style={styles.row}>
          <Image
            style={styles.thumb}
            source={require('../assets/icons/icon.png')}
          />
          <View style={styles.content}>
            <View>
              <Text style={styles.title}>{rowData}</Text>
            </View>
            <View>
              <Text style={styles.text}>
                {
                  'Lorem ipsum dolor sit amet, ius ad pertinax oportere accommodare, an vix civibus corrumpit referrentur. Te nam case ludus inciderint, te mea facilisi adipiscing. Sea id integre luptatum. In tota sale consequuntur nec. Erat ocurreret mei ei. Eu paulo sapientem vulputate est, vel an accusam intellegam interesset. Nam eu stet pericula reprimique, ea vim illud modus, putant invidunt reprehendunt ne qui.'
                }
              </Text>
            </View>
          </View>
        </View>
      </TouchableHighlight>
    );
  }

  _handlePress() {
    // console.log('123');
  }
}

const PeopleStack = StackNavigator({
  People: { screen: PeopleScreen }
});

const styles = StyleSheet.create({
  wrapper: {
    flex: 1
  },
  row: {
    flexDirection: 'row',
    justifyContent: 'center',
    padding: 10,
    backgroundColor: '#ffffff'
  },
  thumb: {
    width: 64,
    height: 64
  },
  content: {
    flex: 1,
    flexDirection: 'column',
    padding: 15,
    paddingTop: 0
  },
  title: {
    fontSize: 16
  },
  text: {
    flex: 1
  }
});

export default PeopleStack;
